<template>
  <div class="me">
    <page :top="0">
      <div class="me-s"> </div>
      <div class="cencer">

        <div class="user_tips">
          <div class="user_tips_title">我的</div>
          <div class="user_tips_desc">浏览和管理您的设置</div>
        </div>

        <div class="user_card">
          <div class="user_card_One">
            <div class="user_card_One_s" @click="Individual">

              <div class="user_card_One_s_div">
                <img :src="meuser.user_portrait" alt="">
              </div>

              <div class="user_card_One_s_div1">
                <div class="user_card_One_s_div1_l">{{ meuser.user_name }}</div>
                <div class="user_card_One_s_div1_l1">暂未填写</div>
              </div>

              <img src="../../static/images/common/next.png">

            </div>
            <!-- //寻回历史记录 -->
            <ul class="user_card_One_x">
              <li @click="Recruitment(v)" v-for="v, i in mething" :key="i" class="user_card_One_x_div">
                <div class="user_card_One_x_z">{{ v.name }}</div>
                <div class="user_card_One_x_z1">{{ v.index }}</div>
              </li>
            </ul>
          </div>
          <div class="user_card_Two"></div>
          <div class="user_card_Three"></div>
        </div>

        <ul class="user_address">
          <li class="address_div" v-for="v, i  in meaddress" :key="i">
            <div class="address_div_z">{{ v.name }}</div>
            <div class="address_div_z1">{{ v.text }}</div>
          </li>
        </ul>

        <ul class="user_list">
          <li @click="concerning(v.index)" v-for="v, i in melist" :key="i">
            <div>
              <img :src="v.src">
              <div>{{ v.text }}</div>
            </div>
            <img src="../../static/images/common/next.png">
          </li>
          <li @click="mebuttom()" class="user_list_buttom">{{ button }}</li>
        </ul>
      </div>


    </page>
  </div>
</template>

<script>
import page from '../components/page.vue'
export default {
  components: { page },
  data() {
    return {
      button: "退出登录",
      //历史记录
      mething: [
        {
          name: '失物招领',
          id: 1,
          index: 0
        },
        {
          name: '寻物启事',
          id: 2,
          index: 0
        }
      ],
      //电话 地址
      meaddress: [
        {
          name: '城市',
          text: null,
        },
        {
          name: '电话',
          text: null,
        }

      ],
      //列表
      melist: [
        {
          src: "../../static/images/icon/edit.png",
          text: '关于',
          index: 1,
          txt: "校园失物招领管理系统（拾金小程序）的主要功能就是帮助校内同学更快的找到自己的丢失之物。小程序系统UI界面简洁清晰、用户操作简易、没有繁杂的信息流、广告弹窗等众多干扰元素、减少使用成本提高使用效率增强用户粘性和归属感，为同学们提供最便捷优质的服务。"
        },
        {
          src: "../../static/images/icon/edit.png",
          text: '反馈',
          index: 2,
          txt: ""
        },
        {
          src: "../../static/images/icon/edit.png",
          text: '帮助',
          index: 3,
          txt: ""
        },
        {
          src: "../../static/images/icon/edit.png",
          text: '协议',
          index: 4,
          txt: ""
        }
      ],
      meuser: []
    }
  },
  async created() {

    this.meuser = this.$utils.getItem("token") //获取用户信息

    let ret = await this.$http.me.history({ id: this.meuser.user_id }) //获取历史
    console.log(ret)

    this.meaddress[0].text = this.meuser.user_city == "" ? "暂未选择" : this.meuser.user_city;//地址

    this.meaddress[1].text = this.meuser.user_phone//电话号码

    this.mething.index = ret.lose_matter//失物

    this.mething[0].index = ret.lose_matter//寻物

    console.log(this.meuser)
  },
  methods: { 
    Recruitment({ id }) {
      //进入历史界面修改这个name 便可！
      this.$router.push({
        name: "history",
        query: {
          id
        }
      })
    },
    //列表弹窗提示  目前只有关于 其他有的时候将 && v.index==1 删了即可
    concerning(id) {
      this.melist.forEach((v, i) => {
        if (id == v.index && v.index == 1) {
          this.$dialog.alert({
            title: v.text,
            message: v.txt,
          });
        }
      })
    },
    //进入个人编辑
    Individual() {
      this.$router.push({
        name: "ind"
      })
    },
    mebuttom() {
      this.$dialog.confirm({
        title: '提示',
        message: '确定退出当前账号吗？',
      })
        .then(() => {
          localStorage.removeItem("token")
          // on confirm
          this.$router.push({
            name: "Home"
          })
        })
        .catch(() => {
          // on cancel

        });
    }

  }
}
</script>


<style scoped lang='less'>
@import "~@less/Me";
</style>
